<template>
	<view :animation="animationData" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove.stop="onTouchMove" class="draw" :style="'top:'+drawerTop+'px;margin-top:'+drawerMarginTop+'px;height:'+drawerHeight+'px'">
	    <slot></slot>
	</view>

</template>

<script>
	export default {
		props: {
			layers: {
				type: Array,
				default: [ "670", "1084" ],
			},
			pixelRatio: {
				type: Number,
				default: 2
			},
			drawerHeight: {
				type: Number,
				 default: 0
			},
			// currentLayer: {
			// 	type: Number,
			// 	default: 0
			// },
			drawerMarginTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				initialed: false,
				drawerPaddingTop: 0,
				drawerTop:'',
				currentLayer: 1,
				dragData: {
					lastY: 0,
					distanceY: 0,
					maxMoveY: -1,
					edgePadding: 0,
					translateY: 0
				},
				animationData:''
			};
		},
		mounted(){
			//console.log(this.styles);
			this.init()
		},
		methods:{
			init: function() {
				var that = this;

				that.drawerTop = that.getLayerTop(that.currentLayer)		
				
			},
			getLayerTop: function(currentLayer) {
				var that = this
		
				return that.drawerHeight - that.layers[currentLayer] * that.pixelRatio - that.dragData.translateY;
			},
			onTouchStart: function(a) {
				var that = this;
				var clientY = ""
				// #ifdef  APP-NVUE
				clientY = a.touches[0].screenY
				//#endif
				// #ifdef  MP||H5
				clientY = a.touches[0].clientY
				//#endif
				
				 that.dragData.lastY = clientY;
				 that.dragData.edgePadding = clientY - this.getLayerTop(that.currentLayer) -  that.dragData.translateY;
			},
			onTouchMove: function(a) {
				var clientY = ""
				// #ifdef  APP-NVUE
				clientY = a.touches[0].screenY
				//#endif
				// #ifdef  MP||H5
				clientY = a.touches[0].clientY
				//#endif
				var t = this, 
				e = t.layers, 
				r = t.pixelRatio, 
				i = t.dragData, 
				n = clientY, 
				s = n - i.edgePadding;
			
			i.distanceY = n - i.lastY
				if (!(s > this.drawerHeight - e[0] * r || s < this.drawerHeight - e[e.length - 1] * r)) {
					if ( i.distanceY > 0) {
						if (this.a > 0) {
							d = this.drawerHeight - e[this.currentLayer - 1] * r;
							n - i.edgePadding >= d && this.currentLayer--;
						}
					} else if (i.distanceY < 0 && this.currentLayer < e.length - 1) {
						var d = this.drawerHeight - e[this.currentLayer + 1] * r;
						n - i.edgePadding <= d && this.currentLayer++;
					}
					var h = this.drawerTop + i.distanceY;
					
					// console.log(3434343,h + i.translateY >= 0 && h + i.translateY < this.drawerHeigh)
					if (h + i.translateY >= 0 && h + i.translateY < this.drawerHeight) {
						this.drawerTop = h
						var o = this.currentLayer, g = h > this.getLayerTop(this.currentLayer) ? this.currentLayer - 1 : this.currentLayer + 1;
						o >= 0 && g >= 0 && this.$emit("drawerMove", {
							currentLayer: o,
							nextLayer: g,
							percent: Math.abs(1 * (h - this.getLayerTop(Math.max(o, g))) / (this.getLayerTop(o) - this.getLayerTop(g)))
						});
					}
					i.lastY = n;
				}
			},
			onTouchEnd: function(a) {
				// console.log(22222,this.drawerHeight)
				// console.log(3333,this.drawerTop)
				// console.log(4444,this.drawerMarginTop)
				var t = this, e = t.layers, r = (t.pixelRatio, this.dragData), i = this.drawerTop - this.getLayerTop(this.currentLayer);
				r.translateY = 0, Math.abs(i) > 15 && (i > 0 && this.currentLayer > 0 ? this.currentLayer-- : i < 0 && this.currentLayer < e.length - 1 && this.currentLayer++), 
				this.triggerLayerChange(), r.translateY = this.getLayerTop(this.currentLayer) - this.drawerTop;
				var n = uni.createAnimation({
					duration: 150,
					timingFunction: "ease-in-out"
				});
				n.translateY(r.translateY).step(), this.animationData = n.export(), r.edgePadding = 0, r.distanceY = 0, r.lastY = 0;
			},
			triggerLayerChange: function() {
				this.$emit("layerChange", {
					expandLevel: this.currentLayer
				});
			}
		}
			
	}
</script>


<style>
	.draw {
	    width: 100%;
	    z-index: 80;
	    position: absolute;
	    left: 0;
	}
</style>
